<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="是否行显示">
                <el-radio-group v-model="propJson.isInline">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="全局Label列宽">
                <el-input v-model="propJson.labelLength" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="展示表单的按钮">
                <el-checkbox-group v-model="propJson.showButtons" style="width: 100%">
                    <el-checkbox label="Cancel">取消</el-checkbox>
                    <el-checkbox label="Submit">提交</el-checkbox>
                    <el-checkbox label="Reset">重置</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="提交后是否弹出成功提示" v-if="propJson.showButtons.includes('Submit')">
                <el-radio-group v-model="propJson.isShowSuccessFlag">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="提交按钮名称" v-if="propJson.showButtons.includes('Submit')">
                <el-input v-model="propJson.submitName" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="提交按钮图标" v-if="propJson.showButtons.includes('Submit')">
                <el-select v-model="propJson.submitIcon" clearable placeholder="选择图标" filterable style="width: 100%">
                    <el-option v-for="item in icons.dataList" :key="item.id" :value="item.componentName" :label="item.componentCnName"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="取消按钮名称" v-if="propJson.showButtons.includes('Cancel')">
                <el-input v-model="propJson.cancelName" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="取消按钮图标" v-if="propJson.showButtons.includes('Cancel')">
                <el-select v-model="propJson.cancelIcon" clearable placeholder="选择图标" filterable style="width: 100%">
                    <el-option v-for="item in icons.dataList" :key="item.id" :value="item.componentName" :label="item.componentCnName"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="重置按钮名称" v-if="propJson.showButtons.includes('Reset')">
                <el-input v-model="propJson.resetName" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="重置按钮图标" v-if="propJson.showButtons.includes('Reset')">
                <el-select v-model="propJson.resetIcon" clearable placeholder="选择图标" filterable style="width: 100%">
                    <el-option v-for="item in icons.dataList" :key="item.id" :value="item.componentName" :label="item.componentCnName"></el-option>
                </el-select>
            </el-form-item>

            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in propJson.list">
                    <template #title>
                        <div class="collapseTitle">
                            <span>字段 {{item.label}}</span>
                        </div>
                    </template>
                    <el-form-item label="label名称">
                        <el-input v-model="item.label" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="属性名称-英文">
                        <el-input v-model="item.labelEn" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="是否必填">
                        <el-radio-group v-model="item.isMust">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="必填提示语" v-if="item.isMust">
                        <el-input v-model="item.mustTipContent" style="width: 100%"/>
                    </el-form-item>

                    <el-divider>数据联动</el-divider>
                    <FormDataAssociation :rule-info="item.ruleInfo" :common-param="commonParam"/>
                </el-collapse-item>
            </el-collapse>
            <br />
            <span v-if="propJson.showButtons.includes('Cancel')">表单取消行为</span>
            <div v-if="propJson.showButtons.includes('Cancel')" style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addFormCancelAction()">添加表单取消行为</el-button>
            </div>

            <CommonThirdServiceAction v-if="propJson.showButtons.includes('Cancel')" :actionList="propJson.formCancelAction" :commonParam="commonParam"/>

            <br />
            <span v-if="propJson.showButtons.includes('Submit')">表单提交行为</span>

            <div v-if="propJson.showButtons.includes('Submit')" style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addFormSubmitAction()">添加表单提交行为</el-button>
            </div>

            <CommonThirdServiceAction v-if="propJson.showButtons.includes('Submit')" :actionList="propJson.formSubmitAction" :commonParam="commonParam"/>
        </el-form>
    </div>
</template>

<script name="GlobalFormDrawer" lang="ts" setup>
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue";
import {computed, defineProps, onMounted, ref, watch} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import {componentIconInfoQuery} from "@/request/components";
import FormDataAssociation from "@/components/lowcode/service/FormDataAssociation.vue";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

let icons = ref([]);

function addFormCancelAction() {
    let variableInfo = {variableValue: "", type: "variable", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    propJson.value.formCancelAction.push(variableInfo)
}

function addFormSubmitAction() {
    let variableInfo = {variableValue: "", type: "variable", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    propJson.value.formSubmitAction.push(variableInfo)
}

let param = {
    pageInfo: {
        pageIndex: 1,
        pageSize: 1000
    }
}
componentIconInfoQuery(param).then(res => {
    icons.value = res.data;
});
</script>

<style scoped lang="less">

</style>